<!doctype html>
<html ng-app="assistantDemo">
  <head>
    <script src="libs/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="AssistantCtrl">
      <h1>{{assistant.title}}</h1>

      <div ng-repeat = "step in assistant.steps">
        <div ng-show = "isCurrentIndex($index)">
          <div style = "float:left">
            {{step.name}}
          </div>
        </div>
        <div ng-show = "!isCurrentIndex($index)">
          <div ng-show = "isCompleted($index)">
            <button style = "float:left; background:#0f0" ng-click = "changeCurrentIndex($index)"> {{step.name}} </button>
          </div>
          <div ng-show = "!isCompleted($index)">
            <button style = "float:left" ng-click = "changeCurrentIndex($index)"> {{step.name}} </button>
          </div>
        </div>
      </div>

      <h3>{{assistant.steps[currentIndex].description}}</h3>

      <img ng-src = "{{getImageOfStep(currentIndex)}}"> </img>
      {{getTextOfStep(currentIndex)}}

      <div class="buttonContainer">
        <button ng-show = "assistant.navButtons.btnPrevious" ng-click = "goToPrevious()"> Previous </button>
        <br/>
        <button ng-show = "assistant.navButtons.btnNext" ng-click = "goToNext()"> Next </button>
      </div>
    </div>
  </body>
</html>